<!-- 团购管理 -->
<template>
	<div v-permission="'团购管理'" class="bg">
		<DATACARD class="dateCard" @save="save" />
		<div class="warp">
			<div class="infiniteUl" id="scroll">
				<nut-infiniteloading
					load-icon="refresh2"
					:use-window="false"
					containerId="scroll"
					:has-more="hasMore"
					@load-more="loadMore"
					load-more-txt="没有更多数据了～"
				>
					<div
						class="tuancard-content"
						v-for="item in listData.list"
						:key="item.id"
						@click="handleJump(item)"
					>
						<TuanCard :item="item" />
					</div>
				</nut-infiniteloading>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup name="grouponmanage">
import { reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue'
import useGroupMange from '@/composable/manage/useGroupMange'
import DATACARD from './components/dateCard.vue'
import TuanCard from './components/tuanCard.vue'
const { listData, listParm, hasMore, loadMore, save ,handleJump} = useGroupMange()
</script>
<style scoped lang="scss">
.bg {
	background: #f8f9fa;
}
.dateCard {
	position: fixed;
	z-index: 99;
	left: 0;
	right: 0;
	background: #f8f9fa;
}
.warp {
	position: absolute;
	left: 0;
	right: 0;
	top: 140px;
	bottom: 0;
	background: #f8f9fa;
}
.tuancard-content {
	padding: 0 30px;
	margin-bottom: 20px;
}
.infiniteUl {
	height: calc(100% - 20px);
	overflow: auto;
	padding-bottom: 20px;
}
:deep(.bottom-box) {
	display: flex;
	justify-content: center;
	align-items: center;
}
:deep(.nut-infiniteloading .nut-infinite-bottom) {
	padding-top: 0 !important;
}
</style>
